@charset "utf-8";
@import "reset";
$fontsize:40;
@function r($px) {
    @return$px/$fontsize *1rem;
}

.web {
    width: 100%;
    height: 100%;
    position: relative;
}

header {
    width: 100%;
    height: r(97);
    font-size: r(40);
    background: black;
    position: absolute;
    top: 0;
    .header_a {
        width: r(672);
        margin: 0 auto;
    }
    .jt {
        width: r(20);
        height: r(34);
        margin-top: r(34);
        img {
            width: 100%;
        }
    }
    .ss {
        width: r(35);
        height: r(35);
        margin-top: r(34);
        img {
            width: 100%;
        }
    }
    .logo {
        width: r(66);
        height: r(92);
        margin: 0 auto;
        padding-top: r(10);
        img {
            width: 100%;
        }
    }
}

section {
    width: 100%;
    position: absolute;
    top: r(97);
    bottom: r(90);
    overflow-y: scroll;
    .head {
        width: r(660);
        margin: 0 auto;
        margin-top: r(30);
        .head_l {
            width: r(280);
            height: r(90);
            .head_l1 {
                width: r(90);
                height: r(90);
                border-radius: 50%;
                margin-right: r(30);
                img {
                    width: 100%;
                }
            }
            p {
                font-size: r(20);
            }
            a {
                color: #656b6d;
                font-size: r(15);
            }
        }
        .head_r {
            font-size: r(24);
            line-height: r(90);
            margin-right: r(30);
        }
        .head_r:before {
            content: "";
            display: inline-block;
            width: r(17);
            height: r(17);
            -webkit-border-radius: 100%;
            background: #e855bd;
            margin-right: r(16);
        }
    }
    .tup {
        width: 100%;
        margin-top: r(30);
        img {
            width: 100%;
        }
    }
    .wenzi {
        width: r(660);
        margin: 0 auto;
        border-bottom: 1px solid #d9d9d9;
        h4 {
            font-size: r(60);
            margin-top: r(48);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
        }
        p {
            color: #777777;
            font-size: r(35);
            margin-top: r(44);
            padding-right: r(30);
            margin-bottom: r(70);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: normal;
            display: -webkit-box;
            -webkit-line-clamp: 7;
            -webkit-box-orient: vertical;
        }
    }
    .wenz{
        width: r(660);
        margin: 0 auto;
        color: #777777;
        font-size: r(38);
    }
}

footer {
    width: 100%;
    height: r(90);
    position: absolute;
    bottom: 0;
    border-top: r(1) solid #dddddd;
    ul {
        width: r(672);
        margin: 0 auto;
        line-height: r(85);
        li {
            display: inline-block;
            margin-right: r(110);
        }
        .iconfont {
            font-size: r(42);
            color: transparent;
            -webkit-text-stroke: 1px #c9c9c9;
        }
        li.active .iconfont {
            -webkit-text-stroke: 1px #f8df63;
        }
    }
}

li:nth-child(4) {
    margin: 0;
    a {
        color: #bcbebf;
        font-size: r(20);
    }
}